<template>
  <view class="music-item" @click="$emit('click')">
    <image class="music-img" :src="music.picUrl" ></image>
    <view class="desc-content">
      <view class="left">
        <view class="title">
          {{music.name}}
        </view>
        <view class="desc">
          {{music.song.artists[0].name}}
        </view>
      </view>
      <uni-icons class="uni-icon" size="20" v-if="play" custom-prefix="iconfont" type="icon-zanting"></uni-icons>
      <uni-icons class="uni-icon" size="20" v-else custom-prefix="iconfont" type="icon-bofang"></uni-icons>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
  defineProps({
    music: {
      type: Object,
      default: () => {}
    }
  })
  
  const play = ref(false)
</script>
<style lang="less">
  .music-item {
    display: flex;
    padding: 15rpx;
    // border: 1px solid #efefef;
    .music-img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 10rpx;
      display: block;
      margin-right: 15rpx;
    }

    .desc-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .uni-icons{
        margin-right: 8rpx;
      }
      .left{
        width: 528rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title{
          font-size: 30rpx;
          margin-bottom: 10rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .desc{
          font-size: 23rpx;
          color: #666;
        }
      }
    }
  }
</style>
